<template>
  <div id="main" />
</template>
<script>
import * as echarts from 'echarts'
import axios from 'axios'
export default {
  /* 过滤器 */
  filters: {

  },
  data() {
    return {

    }
  },
  /* 侦听器 */
  watch: {
    // 立即执行
    // immediate:true
    // 深度侦听
    // deep:true
  },
  async mounted() {
    var ROOT_PATH =
  'https://fastly.jsdelivr.net/gh/apache/echarts-website@asf-site/examples'

    var chartDom = document.getElementById('main')
    var myChart = echarts.init(chartDom)
    var option

    const res = await axios.get(ROOT_PATH + '/data/asset/data/life-expectancy-table.json')
    run(res.data)
    function run(_rawData) {
      // var countries = ['Australia', 'Canada', 'China', 'Cuba', 'Finland', 'France', 'Germany', 'Iceland', 'India', 'Japan', 'North Korea', 'South Korea', 'New Zealand', 'Norway', 'Poland', 'Russia', 'Turkey', 'United Kingdom', 'United States'];
      const countries = [
        'Finland',
        'France',
        'Germany',
        'Iceland',
        'Norway',
        'Poland',
        'Russia',
        'United Kingdom'
      ]
      const datasetWithFilters = []
      const seriesList = []
      echarts.util.each(countries, function(country) {
        var datasetId = 'dataset_' + country
        datasetWithFilters.push({
          id: datasetId,
          fromDatasetId: 'dataset_raw',
          transform: {
            type: 'filter',
            config: {
              and: [
                { dimension: 'Year', gte: 1950 },
                { dimension: 'Country', '=': country }
              ]
            }
          }
        })
        seriesList.push({
          type: 'line',
          datasetId: datasetId,
          showSymbol: false,
          name: country,
          endLabel: {
            show: true,
            formatter: function(params) {
              return params.value[3] + ': ' + params.value[0]
            }
          },
          labelLayout: {
            moveOverlap: 'shiftY'
          },
          emphasis: {
            focus: 'series'
          },
          encode: {
            x: 'Year',
            y: 'Income',
            label: ['Country', 'Income'],
            itemName: 'Year',
            tooltip: ['Income']
          }
        })
      })
      option = {
        animationDuration: 10000,
        dataset: [
          {
            id: 'dataset_raw',
            source: _rawData
          },
          ...datasetWithFilters
        ],
        title: {
          text: '近年全球业务访问量'
        },
        tooltip: {
          order: 'valueDesc',
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          nameLocation: 'middle'
        },
        yAxis: {
          name: 'Income'
        },
        grid: {
          right: 140
        },
        series: seriesList
      }
      myChart.setOption(option)
    }

    option && myChart.setOption(option)
  },
  /* 绑定事件 */
  methods: {

  }
}
</script>
<style lang="scss" scoped>
#main{
    // width: 1750px;
    height: 550px;
}
</style>
